<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>vue-paging</title>
    <link rel="stylesheet" href="./css/init.css">
    <!-- 字体 -->
    <link rel="stylesheet" href="./css/font-awesome.min.css">
    <style>
    .content {
        width: 80%;
        height: 80%;
        margin: 50px auto;
    }
    
    .paging-style {
        width: auto;
        height: 24px;
    }
    
    .paging-style ul li {
        width: 26px;
        height: inherit;
        line-height: 24px;
        float: left;
        border: 1px solid #d9d9d9;
        border-radius: 5px;
        margin: 0 4px;
        font-size: 13px;
        text-align: center;
        cursor: pointer;
        user-select: none;
    }
    
    .active {
        background-color: #2db7f5 !important;
        border-color: #2db7f5 !important;
        color: #fff;
    }
    .not-click{
        cursor: not-allowed !important;
        color: #d2d2d2;
    }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <div class="paging-style" id="paging">
                <ul>
                    <!-- 前一页 -->
                    <li @click="forwardPage()" :class="{'not-click':start==0}">
                        <i class="fa fa-angle-left"></i>
                    </li>
                    <li v-for="page of pages" v-text="page" :class="{active:page==start+1}" @click="turnPage(page-1)">1</li>
                    <!-- 后一页 -->
                    <li @click="nextPage()" :class="{'not-click':start==(totalPage-1)}">
                        <i class="fa fa-angle-right"></i>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</body>
<script src="http://cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script>
var paging = new Vue({
    el: '#paging',
    data: {
        start: 0, //当前页
        pageLen: 10, //每页显示数量
        totalRecords: 184, //总数据量
        totalPage: '', //总页数,自动计算
        maxShow: 9, //页码最大展示数量
        pages: []
    },
    created: function() {
        this.calePageList();
    },
    methods: {
        turnPage: function(p) {
            //跳转页
            this.start = p;
            this.renderPageList();
        },
        forwardPage: function() {
            //前一页
            if (this.start > 0) {
                this.start -= 1;
                // this.getData();
            }
            this.renderPageList();
        },
        nextPage: function() {
            //后一页
            if (this.start + 1 < this.totalPage) {
                this.start += 1;
                // this.getData();
            }
            this.renderPageList();
        },
        calePageList: function() {
            //总页数的计算方法
            let t = this.totalRecords % this.pageLen;
            if (t == 0) {
                this.totalPage = this.totalRecords / this.pageLen;
            } else {
                this.totalPage = parseInt(this.totalRecords / this.pageLen) + 1;
            }
            this.renderPageList();
        },
        renderPageList: function() {
            //渲染列表
            if (this.totalPage <= this.maxShow) {
                for (let i = 0; i < this.totalPage; i++) {
                    this.$set(this.pages, i, i + 1);
                    // this.pages.push(i + 1);
                }

            } else {
                //  [1] [2] [3] [4] [...] [6]
                if ((this.start + 1) < 5) {
                    for (let i = 0; i < this.maxShow; i++) {
                        if (i == this.maxShow - 2) {
                            this.$set(this.pages, i, '...');
                        } else if (i == this.maxShow - 1) {
                            this.$set(this.pages, i, this.totalPage);
                        } else {
                            this.$set(this.pages, i, i + 1);
                        }
                    }
                } else if ((this.start + 1) >= 5 && this.start + 5 < this.totalPage) {
                    //[1][...] [3] [4] [5] [6][7] [...] [8]
                    this.$set(this.pages, 0, 1);
                    this.$set(this.pages, 1, '...');
                    this.$set(this.pages, 2,( this.start-2)+1);
                    this.$set(this.pages, 3,( this.start-1)+1);
                    this.$set(this.pages, 4,  this.start+1);
                    this.$set(this.pages, 5,( this.start+1)+1);
                    this.$set(this.pages, 6, ( this.start+2)+1);
                    this.$set(this.pages, 7, '...');
                    this.$set(this.pages, 8,this.totalPage);
                } else {
                    //[1][...] [3] [4] [5] [6] [7]
                    this.$set(this.pages, 0, 1);
                    this.$set(this.pages, 1, '...');
                    for (let i = 0; i <6; i++) {
                        this.$set(this.pages, i+2, this.totalPage-(6-i));
                    }
                     this.$set(this.pages, 8, this.totalPage);
                }

            }
        }
    }
})
</script>

</html>
